<template>
  <div id="main" style="width:35px;height:35px" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
export default {
  name: 'PcwChartRatio',
  props: {
    chartData: {
      type: Object,
      required: true
    },
    matchingRatio: {
      type: Number,
      required: false,
      default: () => 0
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
        handler() {
            this.$nextTick(() => {
                 this.initCharts()
            })
        },
        deep: true,
        immediate: true
    }
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initCharts() {
        // this.chart = echarts.init(document.getElementById('main'))
        this.chart = echarts.init(this.$el, null)
        // this.chart.clear()
        // this.chart.resize()
        // var chartDom = document.getElementById('main')
        // var myChart = echarts.init(chartDom)
        this.chart.setOption({
            graphic: [{
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: this.matchingRatio + '%',
                font: '100 12px Arial'
              }
          }],
          series: [
            {
              name: '百分比',
              type: 'pie',
              radius: ['80%', '95%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                emphasis: {
                  // 设置饼图半径的大小
                  radius: ['50%', '70%']
                }
              },
              data: [
                { value: this.chartData.success }, // 已匹配科目
                { value: this.chartData.warning }, // 待确认科目
                { value: this.chartData.danger } // 无匹配科目
              ]
            }
          ],
          color: ['#67C23A', '#E6A23C', '#F56C6C']
        })
    }
  }
}
</script>
